/*

Add styles or override variables from the theme here.

*/
@font-face {
  font-family: "AlibabaPuHuiTiB";
  src: url("https://serverless-opensource.oss-cn-shanghai.aliyuncs.com/outer-materials/docs/font/Alibaba-PuHuiTi-Bold.otf");
}

body {
  font-family: PingFangSC-Regular, "Microsoft Yahei";
}

#home-page {
  * {
    border: none;
    border-radius: 0;
  }
}

a, input {
  &:hover {
    cursor: pointer;
  }
}

.td-overlay--dark::after {
  margin: -84px -20px -20px -20px;
  background-color: rgb(16, 21, 28) !important;
}

.td-overlay--dark::before {
  content: '';
  position: absolute;
  left: 0; top: 600px; right: 0; bottom: 0;
  margin-left: -20px;
  margin-right: -20px;
  height: 484px;
  background: url("/img/star-sky-background.png") no-repeat right;
  z-index: 1;
}

#benefits::before {
  content: '';
  position: absolute;
  left: -250px; top: 1750px; right: 0; bottom: 0;
  margin-left: -20px;
  margin-right: -20px;
  height: 484px;
  background: url("/img/star-sky-background.png") no-repeat left;
  z-index: -1;
}

#main_navbar {

  .nav-link {

    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
    padding: 0;
    height: 63px;
    line-height: 59px;
    font-family: PingFangSC-Medium, "Microsoft Yahei";
    font-size: 16px;
    color: rgb(178, 181, 191);
    letter-spacing: 0;
    font-weight: normal;

    > span {
      height: 34px;
      line-height: 34px;
      padding-left: 8px;
      padding-right: 8px;
      display: inline-block;
    }

    &.active {
      color: white;
      opacity: 0.95;
      border-bottom-color: white;
      font-weight: 600;
    }

    &:not(.active) {
      &:hover, &:focus {
        > span {
          background: rgb(35, 43, 73);
          border-radius: 6px;
        }
      }
    }
  }

  .nav-item:last-child {
    display: none !important;
  }
}

.td-sidebar-nav__section.dropdown {
  display: none !important;
}

header > nav.td-navbar {

  padding: 0px;
  margin: 0px;
  height: 63px;
  min-height: 63px;
  max-height: 63px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgb(16, 21, 28) !important;

  > .container-fluid {
    padding: 0px;
    margin: 0px;
    height: 100%;
  }
}

.container-fluid.td-outer {

  margin-top: 63px;
  padding: 0px;

  > main.td-main {
    padding-bottom: 0 !important;
  }

  > div.td-main, > main.td-main {

    > .row {

      margin: 0;
      padding: 0;
      background: transparent;

      .container {

        padding: 0;
        margin: 0;
        max-width: 100%;

        h1 {
          font-family: AlibabaPuHuiTiB;
          font-size: 64px;
          color: rgba(255,255,255,0.95);
          letter-spacing: 0;
          line-height: 72px;
          margin-bottom: 12px;
        }

        p {
          margin-bottom: 72px;
          margin-left: auto;
          margin-right: auto;
          opacity: 0.5;
          font-family: PingFangSC-Regular, "Microsoft Yahei";
          font-size: 20px;
          color: #FFFFFF;
          letter-spacing: 0;
          text-align: center;
          line-height: 36px;
        }

        &:before {
          display: none;
        }

        > .h4.mb-0 {
          max-width: 936px;
          margin: 50px auto 0 auto !important;
          display: block;
        }
      }

      > div {
        margin: 0;
        padding: 0;
      }
    }
  }
}

.td-navbar  {

  height: 63px;
  min-height: 63px;
  max-height: 63px;

  a.navbar-brand {

    svg {
      margin: 0px 8px 0px 24px;
    }

    .navbar-brand__name {
      font-family: AlibabaPuHuiTiB;
      font-size: 24px;
      vertical-align: middle;
      color: #FFFFFF;
      letter-spacing: 0;
      line-height: 32px;
    }
  }

  .pagefind-ui {

    .pagefind-ui__search-input {

      width: 280px;
      height: 36px;
      line-height: 36px;
      padding-left: 32px;
      margin-right: 20px;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      background: rgba(255,255,255,0.05);
      color: white;
      font-family: PingFangSC-Regular, "Microsoft Yahei";
      font-size: 14px;
      font-weight: normal;

      &::placeholder {
        font-size: 14px;
        opacity: 1;
        color: rgba(255,255,255,0.65);
        letter-spacing: 0;
        line-height: 22px;
      }

      &:focus {
        font-weight: normal;
        background: rgba(255,255,255,0.05);
        color: rgba(255,255,255,0.9);
        border: 1px solid rgba(255,255,255,0.25);
      }
    }

    .pagefind-ui__form {
      &:before {
        top: 11px;
        left: 12px;
        background: white;
        opacity: 1;
      }
    }

    .pagefind-ui__search-clear {
      top: 0px;
      right: 20px;
      height: 36px;
      line-height: 36px;
      color: rgba(255,255,255,0.9);
      background: transparent;
    }

    .pagefind-ui__drawer {

      position: absolute;
      z-index: 9999;
      top: 43px;
      left: -528px;
      right: 19px;
      max-height: 650px;
      overflow-y: scroll;
      background: #262E40;
      border: 1px solid rgba(255,255,255,0.20);
      border-radius: 12px;

      .pagefind-ui__message {
        padding: 17px 29px;
        font-family: PingFangSC-Regular, "Microsoft Yahei";
        font-size: 14px;
        font-weight: normal;
        color: #FFFFFF;
        letter-spacing: 0;
        line-height: 22px;
      }

      .pagefind-ui__result {

        border-top: 1px solid rgba(255,255,255,0.10);
        padding: 24px 28px;

        &:hover, &:focus {
          //cursor: pointer;
          background: rgba(255, 255, 255, 0.05);
          .pagefind-ui__result-link {
            //color: #0077FF;
          }
        }

        &:last-of-type {
          border-bottom: none;
        }

        .pagefind-ui__result-inner {
          margin-top: 0;
        }

        .pagefind-ui__result-thumb {

          height: 80px;
          margin-top: 0;
          background: #394258;
          border-radius: 8px;

          .pagefind-ui__result-image {
            height: 100%;
          }
        }

        .pagefind-ui__result-link {
          font-family: PingFangSC-Regular, "Microsoft Yahei";
          font-size: 20px;
          font-weight: normal;
          color: #FFFFFF;
          letter-spacing: 0;
          line-height: 28px;
        }

        .pagefind-ui__result-excerpt {

          margin-top: 6px;
          font-family: PingFangSC-Regular, "Microsoft Yahei";
          font-size: 14px;
          font-weight: normal;
          color: rgba(255,255,255,0.45);
          letter-spacing: 0;
          line-height: 22px;

          mark {
            color: #0077FF;
            background: none;
          }
        }
      }

      .pagefind-ui__results-area {
        margin-top: 0;
      }

      .pagefind-ui__button {

        margin: 16px 28px 24px 28px;
        width: 750px;
        height: 54px;
        background: rgba(255, 255, 255, 0.05);
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: normal;
        color: #FFFFFF;
        letter-spacing: 0;

        &:hover, &:focus {
          background: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }

  div.d-none.d-lg-block {

    &:before {

      content: url(/img/before-search.svg);
      position: absolute;
      top: 16px;
      right: 309px;
      height: 32px;
    }

    .td-search__icon {

      left: 12px;
      display: none !important;

      &:before {
        content: url(/img/search.svg);
        display: none !important;
      }
    }

    .td-search-input {

      width: 225px;
      margin-right: 20px;
      padding: 6px 12px;
      background: rgba(255,255,255,0.05);
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      font-size: 14px;
      display: none !important;

      &:focus {
        opacity: 0.95;
        background: white;
        color: black;
      }
    }
  }
}

#main_navbar {
  margin: 0px !important;
  position: relative;
  left: 40px;
}

footer.td-footer.row.d-print-none {

  height: 63px;
  min-height: 63px;
  margin: 0px;
  padding: 0px;
  border-top: 1px solid rgba(255,255,255,0.08);
  background: rgb(16, 21, 28) !important;
  z-index: 1;

  > .container-fluid > .row {

    > div:first-child, > div:nth-child(2) {
      display: none;
    }

    .td-footer__copyright-etc {
      font-family: PingFangSC-Regular, "Microsoft Yahei";
      font-size: 16px;
      color: rgba(255,255,255,0.45);
      letter-spacing: 0;
      line-height: 45px;
      width: 530px;
      margin-left: auto;
      margin-right: auto;
    }
  }
}

#td-cover-block-0 {

  padding-top: 50px;

  .lead {
    padding: 0 !important;
  }
}

a.navbar-brand {

  svg {
    margin: 0px 8px 0px 24px;
  }

  .navbar-brand__name {
    font-size: 24px;
    vertical-align: middle;
    color: #FFFFFF;
    letter-spacing: 0;
    line-height: 32px;
  }
}

aside.td-sidebar {

  padding: 0;
  border-right: 1px solid rgba(0, 0, 0, 0.15);
  width: 293px;
  background: white !important;

  #td-sidebar-menu {

    width: 292px;

    #m-docs, #m-user-cases {
      display: none;
    }

    .td-sidebar-link {
      margin: 0px;
      padding: 0px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      letter-spacing: 0;
      display: inline-block;
      height: 44px;
      line-height: 44px;
      font-weight: normal;
    }

    ul {

      padding: 0px;

      > li {

        &:not(.with-child) {
          height: 44px;
        }

        &.with-child {

          > .td-sidebar-link {
            margin-bottom: -6px;
          }

          > a:first-child {
            pointer-events: none;
          }
        }
      }
    }

    .ul-1 {

      > li {

        > .td-sidebar-link {
          width: 292px;
          font-family: PingFangSC-Regular, "Microsoft Yahei";
          font-size: 16px;
          color: rgba(0, 0, 0, 0.65);
          padding: 0 20px !important;
        }

        &.active-path {
          > .td-sidebar-link {
            font-family: PingFangSC-Medium, "Microsoft Yahei";
            font-size: 16px;
            color: rgba(0, 0, 0, 0.95);
          }
        }
      }
    }

    .ul-2 > li > .td-sidebar-link {
      width: 292px;
      padding: 0 20px !important;
    }

    .ul-3 > li > .td-sidebar-link {
      width: 292px;
      padding: 0 20px 0 36px !important;
    }

    .ul-4 > li > .td-sidebar-link {
      width: 292px;
      padding: 0 20px 0 52px !important;
    }

    .ul-2, .ul-3, .ul-4 {

      > li {

        > .td-sidebar-link {

          font-family: PingFangSC-Regular, "Microsoft Yahei";
          font-size: 16px;
          color: rgba(0, 0, 0, 0.65);

          > span:before {
            content: url(/img/menu-item-icon-inactive.svg);
            opacity: 1;
            margin-right: 8px;
            position: relative;
            top: -2px;
            width: 8px;
            display: inline-block;
          }

          &:hover, &:focus {
            background: rgba(7, 7, 7, 0.05);
          }
        }

        &.active-path {

          &.with-child {

            > .td-sidebar-link {
              font-family: PingFangSC-Medium, "Microsoft Yahei";
              font-size: 16px;
              color: rgba(0, 0, 0, 0.95);
            }
          }

          &:not(.with-child) > .td-sidebar-link {

            font-family: PingFangSC-Medium, "Microsoft Yahei";
            font-size: 16px;
            color: rgba(0, 0, 0, 0.95);
            background: rgba(7, 7, 7, 0.05);

            > span:before {
              content: url(/img/menu-item-icon-active.svg);
            }
          }
        }
      }
    }

    .td-sidebar__search {
      margin: 20px 0 16px 0;
      padding: 0 20px;
    }

    .td-search__icon {

      left: 12px;
      margin-right: 8px;
      margin-top: 2px;

      &:before {
        content: url(/img/side-bar-search.svg);
      }
    }

    .td-search-input {

      width: 252px;
      height: 36px;
      margin: 0px;
      padding: 6px 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(0, 0, 0, 0.25);
      border-radius: 8px;
      font-family: PingFangSC-Regular, "Microsoft Yahei";
      font-size: 14px;
      color: rgba(0, 0, 0, 0.95);
      letter-spacing: 0;

      &:focus {
        //border: 1px solid rgba(0, 0, 0, 0.25) !important;
        //border-radius: 8px;
        background: white;
        color: rgba(0, 0, 0, 0.95);
      }
    }

    #td-section-nav {

      margin: 0px;
      padding: 0px;
      max-height: calc(100vh - 170px);

      .ul-1 > li:last-child {
        margin-bottom: 50px !important;
      }

      .td-sidebar-nav__section {
        margin: 0;
        padding: 0 !important;
      }
    }
  }
}

li.active-path > a {
  font-weight: 600 !important;
}

//div.td-main {
//  border-top: 1px solid white;
//}

.td-page main.td-main {
  padding-right: 245px !important;
}

div.td-main main {
  @media screen and (min-width: 768px) {
    width: calc(100% - 293px);
  }
  @media screen and (min-width: 1200px) {
    width: calc(100% - 538px);
  }
}

.td-main > .row > main {
  background: white !important;
}

main.td-main {
  background-color: rgb(16, 21, 28) !important;;
}

main.td-main, div.td-main main {

  padding: 20px !important;
  color: rgba(0, 0, 0, 0.95);
  font-family: PingFangSC-Regular, "Microsoft Yahei";
  font-size: 15px;
  line-height: 24px;
  letter-spacing: 0;

  > .linkbox {
    display: none;
  }

  .td-content > * {
    @media screen and (min-width: 992px) {
      max-width: 100%;
    }
  }

  //.td-content > h1:first-child {
  //  margin-bottom: 72px !important;
  //}

  table tr {
    td, th {
      font-family: PingFangSC-Regular, "Microsoft Yahei";
      font-size: 15px;
      line-height: 24px;
    }
  }

  ol, ul {
    margin-top: 6px;
  }

  p, li {
    margin-bottom: 0;
  }

  img {
    margin: 10px 0 12px 0;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
  }

  .highlight {
    margin-top: 15px;
    margin-bottom: 28px;
  }

  h1, h2, h3, h4, h5 {

    font-family: PingFangSC-Medium, "Microsoft Yahei";
    max-width: 100%;
    color: rgba(0, 0, 0, 0.95);
    letter-spacing: 0;

    &[id]:before {
      margin: 0px;
      height: 0px;
    }

    > a[aria-hidden="true"] {
      position: relative;
      top: -1px;
    }
  }

  .article-meta {
    margin-bottom: 0px;
  }

  h1 {

    margin: 40px 0px 20px 0px !important;
    font-size: 28px;
    font-weight: normal;
    line-height: 36px;

    &:first-child {
      margin-top: 0px !important;
    }
  }

  h2 {

    margin: 32px 0px 20px 0px !important;
    font-size: 24px;
    font-weight: normal;
    line-height: 28px;

    &:first-child {
      margin-top: 0px !important;
    }
  }

  h3 {

    margin: 20px 0px 16px 0px !important;
    font-size: 20px;
    font-weight: normal;
    line-height: 28px;

    &:first-child {
      margin-top: 0px !important;
    }
  }

  h4 {

    margin: 16px 0px 10px 0px !important;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;

    &:first-child {
      margin-top: 0px !important;
    }
  }

  h5 {

    margin-top: 15px !important;
    font-size: 15px;
    font-weight: normal;
    line-height: 18px;

    &:first-child {
      margin-top: 0px !important;
    }
  }

  //a:not(.btn) {
  //  color: #0077FF !important;
  //}

  .section-index {

    > .panel-line {
      display: none;
    }

    .entry {

      margin: 0;
      padding: 0;

      h5 {
        margin: 32px 0px 20px 0px !important;
        max-width: 100%;

        > a {
          font-family: PingFangSC-Medium, "Microsoft Yahei";
          font-size: 20px;
          font-weight: normal !important;
          line-height: 28px;
          letter-spacing: 0;
        }
      }
    }
  }

  .text-muted {

    border-width: 0px !important;
    font-family: PingFangSC-Regular, "Microsoft Yahei";
    font-size: 14px;
    letter-spacing: 0;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.45) !important;
    //position: absolute;
    //top: 66px;

    > a {
      opacity: 0.85;
    }
  }

  .btn {
    border-radius: 12px;
  }

  .d-print-none {

    .feedback--title {
      margin-top: 52px !important;
    }

    .feedback--question {
      color: rgba(0, 0, 0, 0.65);
      font-family: PingFangSC-Regular, "Microsoft Yahei";
      font-size: 14px;
      letter-spacing: 0;
      line-height: 22px;
      display: inline;
    }

    .feedback--answer {
      margin: 0 !important;
      width: 16px;
      height: 16px;
      border-radius: 0;
      padding: 0;
      border: none;
      color: transparent;
      color: transparent;
      background-color: transparent;
    }

    .feedback--answer-yes {
      margin: 0px 10px 2px 16px !important;
      background-image: url(/img/feedback-yes.svg);
    }

    .feedback--answer-no {
      background-image: url(/img/feedback-no.svg);
    }
  }
}

aside.td-sidebar-toc {

  top: 0px;
  width: 245px;
  height: auto;
  margin: 0px;
  padding: 0;
  border-left: 1px solid rgba(0, 0, 0, 0.15);
  background: white !important;

  #TableOfContents {

    ul > li {

      margin: 0px;

      > a {

        padding: 0px 16px;
        height: 36px;
        line-height: 36px;
        font-family: PingFangSC-Regular, "Microsoft Yahei";
        font-size: 15px;
        color: rgba(0, 0, 0, 0.65);
        letter-spacing: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;

        &:hover, &:focus {
          font-family: PingFangSC-Medium, "Microsoft Yahei";
          color: rgba(0, 0, 0, 0.95);
          background: rgba(7, 7, 7, 0.05);
        }
      }

      li > a {

        &:before {
          content: url(/img/menu-item-icon-inactive.svg);
          opacity: 1;
          margin-right: 8px;
          position: relative;
          top: -1px;
        }

        &:hover, &:focus {
          &:before {
            //content: url(/img/menu-item-icon-active.svg);
          }
        }
      }
    }
  }

  .td-page-meta {

    margin: 0 !important;
    padding: 18px 0 16px 0 !important;

    > a {
      padding: 0 16px;
      line-height: 24px;
      font-family: PingFangSC-Regular, "Microsoft Yahei";
      font-size: 15px;
      color: #0077FF;
    }
  }
}

#m-blog-li {

  #m-blog {
    display: none;
  }

  li.td-sidebar-nav__section {

    &.active-path, &:hover, &:focus {
      background: rgba(7, 7, 7, 0.05);
    }

    > .td-sidebar-link > span:before {
      position: relative;
      top: 4px;
      margin-right: 8px;
    }

    &:nth-child(1) > .td-sidebar-link > span:before {
      content: url(/img/docs-and-videos.svg);
    }

    &:nth-child(2) > .td-sidebar-link > span:before {
      content: url(/img/awards.svg);
    }

    &:nth-child(3) > .td-sidebar-link > span:before {
      content: url(/img/meeting-minutes.svg);
    }

    &:nth-child(4) > .td-sidebar-link > span:before {
      content: url(/img/release-notes.svg);
    }
  }
}

.td-blog-posts-list > .td-blog-posts-list__item {
  margin-bottom: 36px !important;
}

.td-byline {
  margin-bottom: -8px;
}

.halo {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: rgba(0, 0, 255, 0.5);
  backdrop-filter: blur(25px);
  pointer-events: none;
  transform: translate(-50%, -50%);
  z-index: 9999;
  opacity: 0;
}

.all-user-cases-logo {
  border-radius: 0 !important;
  margin-top: 0 !important;
}
